<template>
    <div class="nav">
        <el-menu :default-active="path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" @select="selectNav">
            <div class="logo">
            </div>
            <div class="isCollapse" @click="Collapse">
                <i :class="navClass"></i>
            </div>
            <el-menu-item v-for="(item,index) in navData" :key='index' :index="item.path">
                <i :class="item.class"></i>
                <span slot="title">{{item.name}}</span>
            </el-menu-item>

        </el-menu>
    </div>
</template>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
}

.el-menu-vertical-demo {
    height: 100%;
    box-shadow: 1px 0 2px #e4eaf3;
}
.el-menu-vertical-demo:hover .isCollapse{
    display: block;
}
.logo {
    width: 100%;
    height: 59px;
    background: #eef1f6;
    border-bottom: 1px solid #e4eaf3;
    text-align: center;
    line-height: 59px;
}
.isCollapse {
    display: none;
    width: 15px;
    height: 30px;
    line-height: 30px;
    border-radius:0 30px 30px 0; 
    background: #e4eaf3;
    position: absolute;
    right: -15px;
    top: calc(50% - 15px);
    z-index: 10;
}
.is-active {
    background: #d1dbe5;
}
</style>

<script>
export default {
    name: 'nav',
    data() {
        return {
            isCollapse: true,
            navClass: 'el-icon-arrow-right',
            path:''
        };
    },
    props: ['navData'],
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        selectNav(keyPath) {
            this.$emit('navpath', keyPath);
        },
        Collapse () {
            this.isCollapse = !this.isCollapse;
            this.navClass = this.isCollapse?'el-icon-arrow-right':'el-icon-arrow-left';
        }
    },
    mounted () {
        this.$nextTick(function () {
            this.path = this.$route.name
        })
    }
}
</script>
